<template>
  <!-- 运费管理 -->
  <el-row class="main" :gutter="20">
    <el-card>
      <el-button type="primary" @click="showDialog = true">新增模板</el-button>
      <!-- 表格 -->
      <el-table class="staff_table" :data="tableData" :stripe="true" style="width: 100%" :header-cell-style="{ background: '#f8faff', color: '#818693' }">
        <el-table-column prop="templateType" label="模板类型">
          <template slot-scope="scope">
            <template v-if="scope.row.templateType == 1">同城寄</template>
            <template v-else-if="scope.row.templateType == 2">省内寄</template>
            <template v-else-if="scope.row.templateType == 3">经济区互寄</template>
            <template v-else-if="scope.row.templateType == 4">跨省</template>
          </template>
        </el-table-column>
        <el-table-column prop="transportType" label="运送类型">
          <template slot-scope="scope">
            <template v-if="scope.row.transportType == 1">普快</template>
            <template v-else>特快</template>
          </template>
        </el-table-column>
        <el-table-column prop="associatedCityList" label="关联城市">
          <template slot-scope="scope">
            <template v-if="scope.row.associatedCityList == 2">京津冀</template>
            <template v-else-if="scope.row.associatedCityList == 3">江浙沪</template>
            <template v-else-if="scope.row.associatedCityList == 4">川渝</template>
            <template v-else-if="scope.row.associatedCityList == 5">黑吉辽</template>
            <template v-else>全国</template>
          </template>
        </el-table-column>
        <el-table-column prop="firstWeight" label="首重" />
        <el-table-column prop="continuousWeight" label="续重" />
        <el-table-column prop="lightThrowingCoefficient" label="轻抛系数" />
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button type="text" style="color:#419eff" @click="btnEdit(row.id) ">编辑</el-button>
            <span style="margin-left:10px">|</span>
            <el-popconfirm title="确定删除吗？" @confirm="btnDel(row.id)">
              <el-button slot="reference" style="margin-left:10px" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 弹出框 -->
    <el-dialog title="运费模板" :visible.sync="showDialog" width="30%" @close="btnCancel">
      <el-form ref="diaForm" status-icon label-width="100px" :model="formData" :rules="formRules">
        <el-form-item prop="templateType" label="模板类型">
          <el-select v-model="formData.templateType" clearable placeholder="请选择模板类型">
            <el-option v-for="item in options.templateType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item prop="transportType" label="运送类型">
          <el-select v-model="formData.transportType" clearable placeholder="请选择运送类型">
            <el-option v-for="item in options.transportType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市">
          <el-checkbox-group v-model="formData.associatedCityList">
            <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item prop="firstWeight" label="首重价格">
          <el-input v-model="formData.firstWeight" placeholder="请输入首重价格">
            <i slot="suffix">元</i>
          </el-input>
        </el-form-item>
        <el-form-item prop="continuousWeight" label="续重价格">
          <el-input v-model="formData.continuousWeight" placeholder="请输入续重价格">
            <i slot="suffix">元</i>
          </el-input>
        </el-form-item>
        <el-form-item prop="lightThrowingCoefficient" label="轻抛系数">
          <el-input v-model="formData.lightThrowingCoefficient" placeholder="请输入轻抛系数" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btnOK">确认</el-button>
          <el-button @click="btnCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-row>

</template>

<script>
import { getFreightList, addFreight, delFreight } from '@/api/cost'

const cityOptions = ['全国', '京津冀', '江浙沪', '川渝', '黑吉辽']

export default {
  data() {
    return {
      showDialog: false,
      // 表格数据
      tableData: [],

      cities: cityOptions,

      // 表单选项
      options: {
        // 模板类型
        templateType: [
          { value: 1, label: '同城寄' },
          { value: 2, label: '省内寄' },
          { value: 3, label: '经济区互寄' },
          { value: 4, label: '跨省' }
        ],
        // 运送类型
        transportType: [
          { value: 1, label: '普快' },
          { value: 2, label: '特快' }
        ]
      },

      // 表单数据
      formData: {
        templateType: null,
        transportType: null,
        associatedCityList: [],
        firstWeight: null,
        continuousWeight: null,
        lightThrowingCoefficient: null
      },

      // 表单验证规则
      formRules: {
        templateType: [{ required: true, message: '请选择模板类型', trigger: 'blur' }],
        transportType: [{ required: true, message: '请选择运送类型', trigger: 'blur' }],
        associatedCityList: [
          // checkbox 数据 array 不能为空
          { type: 'array', required: true, message: '请选择关联城市', trigger: 'blur' }
        ],
        firstWeight: [
          { required: true, message: '请输入首重价格', trigger: 'blur' },
          { pattern: /^([1-9]\d*|0)(\.\d{1,2})?$/, message: '只能输入数字类型，最多保留两位小数，请重新输入', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '请输入续重价格', trigger: 'blur' },
          { pattern: /^([1-9]\d*|0)(\.\d{1,2})?$/, message: '只能输入数字类型，最多保留两位小数，请重新输入', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '请输入轻抛系数', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '只能输入正整数，请重新输入', trigger: 'blur' }
        ]
      }

    }
  },
  created() {
    this.getFreightList()
  },
  methods: {
    // 获取table数据
    async getFreightList() {
      this.tableData = await getFreightList()
    },

    // 编辑table数据
    async btnEdit(id) {
      const res = await getFreightList()
      const data = res.find(item => item.id === id)
      console.log(data)
      // 对 formData.associatedCityList 进行处理
      data.associatedCityList = data.associatedCityList.map(item => {
        if (item === 2) {
          return '京津冀'
        } else if (item === 3) {
          return '江浙沪'
        } else if (item === 4) {
          return '川渝'
        } else if (item === 5) {
          return '黑吉辽'
        } else {
          return '全国'
        }
      })
      this.formData = data
      this.showDialog = true
    },

    // 删除table数据
    async btnDel(id) {
      await delFreight(id)
      this.$message.success('删除成功')
      this.getFreightList()
    },

    // form表单确认
    async btnOK() {
      await this.$refs.diaForm.validate()
      // 将数据全部转换为数字类型
      this.formData.firstWeight = Number(this.formData.firstWeight)
      this.formData.continuousWeight = Number(this.formData.continuousWeight)
      this.formData.lightThrowingCoefficient = Number(this.formData.lightThrowingCoefficient)
      await addFreight(this.formData)
      if (this.formData.id) {
        this.$message.success('编辑成功')
      } else {
        this.$message.success('新增成功')
      }
      this.getFreightList()
      this.btnCancel()
    },

    // form表单取消
    btnCancel() {
      this.$refs.diaForm.resetFields()
      this.formData.associatedCityList = []
      this.showDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  padding-top: 24px;
}

i{
  font-style: normal;
  margin-right: 7px;
  color: #818693;
}

.el-input {
  width: 400px;
}

.el-select{
  width: 400px;
}

.staff_table{
  margin: 20px 0 20px;
  border: 1px solid #ebeef5;
}
</style>
